<template>
	<div class="chart-pane-bar">
		<!-- 政策跟踪-tops -->
		<div id="Smoothedline"></div>
	</div>
</template>
<script>
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
export default{
	name:'Smoothedline',
	data(){
		return {
			msg:''
		}
	},
	computed: {
        name(){
            return this.$route.path
        }
    },
    mounted(){
    	var that = this;
    	that.getSmoothedline();
    },
	methods:{
		getSmoothedline(){
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('Smoothedline'));
			// 绘制图表
			myChart.setOption({
				title:{
					subtext:'近7天趋势',
					subtextStyle:{
						color:'#ffffff',
						fontSize:16
					},
					left:'25px'
				},
			    tooltip: {
			        trigger: 'axis'
			    },
			    legend: {
			        data:[
			        	{
			        		name:'安徽省科技厅',
			        		icon:'none'
			        	},
			        	{
			        		name:'合肥市科技局',
			        		icon:'none'
			        	},
			        	{
			        		name:'马鞍山市科技局',
			        		icon:'none'
			        	},
			        	{
			        		name:'淮南市科技局',
			        		icon:'none'
			        	}
			        ],
			        type: 'plain', 
			        orient: 'horizontal',        
			        textStyle:{
			        	color:['#cc301b','#f58234','#0c81fe','#51c038']
			        },
                    right:'0px',//靠右
                    bottom: 60,// 下距离
                    width:100,// 宽度
                    itemGap: 40,// 间隔
                    
			    },
			    xAxis: {
			        type: 'category',
			        data: ['5月13日', '5月14日', '5月15日', '5月16日', '5月17日', '5月18日', '5月19日'],
			        //网格样式
			        splitLine: {
			            show: true,
			            lineStyle:{
							color: ['#0f4564'],
							width: 1,
							type: 'dashed'
			            }
			        },
			        //  改变x轴颜色
		            axisLine:{
		                lineStyle:{
		                    color:'#0e7992',
		                }
		            },
			    },
			    yAxis: {
			        type: 'value',
			        //网格样式
			        splitLine: {
			            show: true,
			            lineStyle:{
							color: ['#0f4564'],
							width: 1,
							type: 'dashed'
			            }
			        },
			        //  改变y轴颜色
		            axisLine:{
		                lineStyle:{
		                    color:'#ffffff',
		                }
		            },
			    },
			    series: [{
			         name:'安徽省科技厅',
			        data: [110, 70, 43, 65, 90, 83, 77],
			        type: 'line',
			        smooth: true
			    },{
			        name:'合肥市科技局',
			        data: [86, 40, 27, 46, 64, 58, 56],
			        type: 'line',
			        smooth: true
			    },{
			         name:'马鞍山市科技局',
			        data: [42, 34, 17, 37, 50, 44, 25],
			        type: 'line',
			        smooth: true
			    },{
			        name:'淮南市科技局',
			        data: [10, 22, 12, 17, 19, 16, 5],
			        type: 'line',
			        smooth: true
			    }],
			    color:['#cc301b','#f58234','#0c81fe','#51c038'],
			    textStyle:{
			    	color:'#ffffff'
			    }

			});
		}
	}
}
</script>
<style>
#Smoothedline{
	width:100%;
	height: 300px;
}
</style>